<template>
  <div class="w-full h-full rounded-xl bg-main-400 overflow-hidden shadow">
    <div class="w-full h-12 justify-center font-bold text-center text-lg
         bg-gradient-to-r text-main-500 flex items-center"
         :class="[headerClass]"
    >
      {{ name }}
    </div>
    <div class="flex justify-center items-center text-4xl" style="height: calc(100% - 50px);">
      {{ value }}
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  name: {
    type: String,
    required: true
  },

  value: {
    type: String,
    required: true,
  },

  headerClass: {
    type: String,
    required: false,
    default: ''
  }
})
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
